<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>01_复习</title>

        <style>
            #outer {
                width: 400px;
                background-color: #999;
            }

            #d1 {
                width: 100px;
                height: 100px;
                background-color: red;

                margin-bottom: 200px;

                margin-top: 100px;
            }

            #d2 {
                width: 100px;
                height: 100px;
                background-color: green;

                margin-bottom: 100px;

            }

            /* #dd {
                width: 100px;
                height: 100px;
                background-color: yellow;

                margin-top: 100px;
                margin-bottom: 100px;
            } */
        </style>
    </head>
    <body>
        <!-- margin塌陷 -->
        <!-- 实际的企业级开发中不会给大盒子设置高 -->


        <div id="outer">
            <div id="d1"></div>
            <!-- <div id="dd"></div> -->
            <div id="d2"></div>
        </div>

        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam earum quaerat debitis deserunt libero tempore omnis minus fugiat voluptas repudiandae exercitationem corporis at nulla eius dicta adipisci ab quisquam commodi sit nemo, dolorum fuga necessitatibus veniam unde! Ipsum rem enim laborum veritatis, voluptate labore consectetur ipsa voluptatibus amet, pariatur totam tenetur eaque excepturi quae! Maxime minus, numquam est mollitia ipsam officiis eius, dignissimos incidunt inventore magnam rem assumenda nobis sequi saepe? Corrupti tempora architecto nostrum, dolor vel repellendus eveniet fuga veniam repellat laudantium maxime unde iure possimus rerum explicabo cupiditate? Numquam voluptates delectus odio alias illum cum quae omnis perferendis!</div>
    
        <!-- 什么时候会发生外边距塌陷
            大盒子里面的第一个子元素的上外边距  和 
            大盒子里面的最后一个子元素的下外边距 会塌陷
        -->
    
    </body>
</html>